<template>
	<page-meta :root-font-size="fontSize"></page-meta>
	<view>
		<view class="flex flex-ac flex-bt mg-30 pd-30 bg-FF" style="border-radius: 20rpx;margin-top: 20rpx;" @click="fontClick('small')">
			<view style="font-size: 28rpx;">
				小字体
			</view>
			<view class="checkbox" :class="smallFontSelect ? 'checkbox-activite' : ''">
				<u-icon name="checkmark" color="#FFF" size="32"></u-icon>
			</view> 
		</view>
		<view class="flex flex-ac flex-bt mg-30 pd-30 bg-FF" style="border-radius: 20rpx;margin-top: 20rpx;" @click="fontClick('standar')">
			<view style="font-size: 32rpx;">
				标准字体
			</view>
			<view class="checkbox" :class="standarFontSelect ? 'checkbox-activite' : ''">
				<u-icon name="checkmark" color="#FFF" size="32"></u-icon>
			</view> 
		</view>
		<view class="flex flex-ac flex-bt mg-30 pd-30 bg-FF" style="border-radius: 20rpx;margin-top: 20rpx;" @click="fontClick('big')">
			<view style="font-size: 40rpx;">
				大字体
			</view>
			<view class="checkbox" :class="bigFontSelect ? 'checkbox-activite' : ''">
				<u-icon name="checkmark" color="#FFF" size="32"></u-icon>
			</view> 
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				fontSize:'',
				fontsize:'39rpx',
				color:'#27ae60',
				smallFont:'小字体',
				smallFontSelect:false,
				standarFontSelect:true,
				bigFontSelect:false,
				standardFont:'标准字体',
				bigFont:'大字体'
			};
		},
		onLoad() {
			_self = this;
			_self.fontSize = uni.getStorageSync('fontSize');
			if(_self.fontSize == '9px'){
				_self.smallFontSelect = true;
				_self.standarFontSelect = false;
				_self.bigFontSelect = false;
			}else if(_self.fontSize == '10px'){
				_self.smallFontSelect = false;
				_self.standarFontSelect = true;
				_self.bigFontSelect = false;
			}else if(_self.fontSize == '13px'){
				_self.smallFontSelect = false;
				_self.standarFontSelect = false;
				_self.bigFontSelect = true;
			}
		},
		computed: {
			
		},
		methods: {
			//-----------------------------------------------Toast 消息提示-----------------------------------------------
			showToast(title, type) {
				_self.$refs.uToast.show({
					title: title,
					type: type,
				})
			},
			fontClick:function(params){
				if(params === 'small'){
					_self.smallFontSelect = true;
					_self.standarFontSelect = false;
					_self.bigFontSelect = false;
					// uni.setStorageSync('fontSize', '9px');
					_self.setStorage('9px');
				}else if(params === 'standar'){
					_self.smallFontSelect = false;
					_self.standarFontSelect = true;
					_self.bigFontSelect = false;
					// uni.setStorageSync('fontSize', '10px');
					_self.setStorage('10px');
				}else if(params === 'big'){
					_self.smallFontSelect = false;
					_self.standarFontSelect = false;
					_self.bigFontSelect = true;
					// uni.setStorageSync('fontSize', '13px');
					_self.setStorage('13px');
				}
			},
			setStorage:function(data){
				uni.setStorage({
					key:'fontSize',
					data:data,
					success() {
						getApp().globalData.fontSize = data;
						_self.showToast('设置成功','success');
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.checkbox {
		width: 45rpx;
		height: 45rpx;
		border: solid 1rpx #999;
		border-radius: 100%;
		text-align: center;
		line-height: 45rpx;
	}
	.checkbox-activite {
		background: linear-gradient(270deg, #ef7d4e, #ec5249);
		border-color: #ec5249;
	}
</style>
